<template>
    <el-row :gutter='20'>
        <el-col :span='8' style='margin-left: 20px'>
            <el-card title='菜单列表'>
                <el-tree :data='data' :props='defaultProps' @node-click='handleNodeClick' />
            </el-card>

        </el-col>
        <el-col :span='16'><div class='grid-content bg-purple' /></el-col>
    </el-row>
</template>

<script lang="ts" setup>
import { ElRow,ElCol ,ElTree,ElCard } from 'element-plus'
interface Tree {
    label: string
    children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
    console.log(data)
}

const data: Tree[] = [
    {
        label: 'Level one 1',
        children: [
            {
                label: 'Level two 1-1',
                children: [
                    {
                        label: 'Level three 1-1-1'
                    }
                ]
            }
        ]
    },
    {
        label: 'Level one 2',
        children: [
            {
                label: 'Level two 2-1',
                children: [
                    {
                        label: 'Level three 2-1-1'
                    }
                ]
            },
            {
                label: 'Level two 2-2',
                children: [
                    {
                        label: 'Level three 2-2-1'
                    }
                ]
            }
        ]
    },
    {
        label: 'Level one 3',
        children: [
            {
                label: 'Level two 3-1',
                children: [
                    {
                        label: 'Level three 3-1-1'
                    }
                ]
            },
            {
                label: 'Level two 3-2',
                children: [
                    {
                        label: 'Level three 3-2-1'
                    }
                ]
            }
        ]
    }
]

const defaultProps = {
    children: 'children',
    label: 'label'
}
</script>
